<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:insert="admin/common/frame :: head(~{},~{},~{})">
</head>
<body>
<div class="wrap">
    <div th:replace="admin/common/frame :: left"></div>
    <div th:replace="admin/common/frame :: top"></div>
    <div class="main">
        <div class="content">
            <div id="order-container" class="container-fluid">
                <table class="table text-center border">
                    <thead>
                    <tr class="row mx-0">
                        <td class="col-1 border-top-0 border-right">订单号</td>
                        <td class="col-1 border-top-0 border-right">总价格</td>
                        <td class="col-2 border-top-0 border-right">订单时间</td>
                        <td class="col-2 border-top-0 border-right">评价</td>
                        <td class="col-2 border-top-0 border-right">配取信息</td>
                        <td class="col-1 border-top-0 border-right">是否长期餐</td>
                        <td class="col-3 border-top-0">详情</td>
                    </tr>
                    </thead>
                    <tbody>
                    <tr class="row mx-0" v-for="order in orders">
                        <td class="col-1 p-0 border-right">{{order.id}}</td>
                        <td class="col-1 p-0 border-right">{{order.price}}</td>
                        <td class="col-2 p-0 border-right">{{order.createAt}}</td>
                        <td class="col-2 text-truncate small border-right" :title="order.comment">{{order.comment || '暂未评价'}}</td>
                        <td class="col-1 p-0 border-right">
                            <div v-if="order.address">
                                <span class="d-block">姓名：{{order.address.name}}</span>
                                <span class="d-block">电话：{{order.address.mobile}}</span>
                                <span class="d-block">地址：{{order.address.address}}</span>
                            </div>
                            <div v-else>
                                <span class="d-block">{{order.getType}}</span>
                            </div>
                        </td>
                        <td class="col-1 p-0 border-right small">
                            {{order.getTime}}
                        </td>
                        <td class="col-1 p-0 border-right">{{order.longTerm ? '是' : '否'}}</td>
                        <td class="col-3 p-0">
                            <table class="table my-0 small">
                                <thead>
                                <tr>
                                    <td class="border-top-0 p-2">菜名</td>
                                    <td class="border-top-0 p-2">价格</td>
                                    <td class="border-top-0 p-2">数量</td>
                                </tr>
                                </thead>
                                <tbody>
                                <tr v-for="menu in order.menus">
                                    <td class="border-right p-2">{{menu.name}}</td>
                                    <td class="border-right p-2">{{menu.price}}</td>
                                    <td class="p-2">{{menu.quantity}}</td>
                                </tr>
                                </tbody>
                            </table>
                        </td>
                    </tr>
                    </tbody>
                </table>
                <th:block th:include="admin/pagenation :: page"></th:block>
            </div>
        </div>
    </div>
</div>
<th:block th:include="admin/common/scripts :: scripts"/>
<script>
    new Vue({
        el: "#order-container",
        data: {
            currentPage: 0,
            orders: []
        },
        created() {
            this.go(0)
        },
        methods: {
            go(direction) {
                if (this.currentPage + direction === -1) {
                    return
                }
                this.currentPage = this.currentPage + direction
                $.get('/admin/orders', {page: this.currentPage}, res => {
                    if (res.code === -1) {
                        alert(res.message)
                        return
                    }
                    console.log(res)
                    this.orders = res.data.content
                })
            }
        }
    })
</script>
</body>
</html>